<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <title>图书-用户登陆的首页</title>-->
    <title>图书-首页</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>

<style>
    *{
        font-size : 14px
    }
    .book-content-title{
        width : 200px;
    }

    .left-small-title{
        background-color: #333333;
        padding: 2px 10px;
        color: #FFFFFF!important;
        font-weight: bold;
    }
    [v-cloak] {
        display: none;
    }
    .nav{
        height: 44px;
        width:80px;
        display: inline-block;
    }
    .nav:hover{
        color:#409EFF;
        text-decoration:underline;
        cursor: pointer;
    }
    .d-b{
        display: block;
    }
    .active{
        color:#409EFF;
        text-decoration:underline;
    }
</style>
<body style="background-color: #fff">

<div id="app" v-cloak>
    <div class="mt-4 ml-4" id="navWrap">
        <span class="nav" @click="showNav('index',0)">首页</span>
        <span class="nav" @click="showNav('donation',1)">赠书</span>
        <span class="nav" @click="showNav('announcement',2)">公告</span>
        <span class="nav" @click="showNav('active',3)">活动</span>
        <span class="nav" @click="showNav('question',4)">常见问题</span>
    </div>

    <div class="mt-8 ml-4" id="index">
        <div>
            <el-select size="small" v-model="queryParam.nameOrId" placeholder="请选择">
                <el-option value="2" label="isbn"></el-option>
                <el-option value="1" label="书籍名称"></el-option>
                <el-option value="3" label="作者"></el-option>
                <el-option value="4" label="索书号"></el-option>
                <el-option value="5" label="出版社"></el-option>
            </el-select>
            <el-input size="small" class="ml-2" placeholder="请输入搜索关键字" style="width:150px;" v-model="queryParam.nameAndId" @keyup.native.enter="getTableDataMethod(true)"></el-input>
            <el-button type="primary" size="small" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
        </div>

        <div class="mt-4 df">
            <div style="width:100px">
                <div>
                    <div class="left-small-title">出版日期：</div>
                    <div v-for="(item,index) in nearTenYear" :key="index" class="mt-1 copy-a" @click="selectPublishYear(item)">
                        {{item}}
                    </div>
                </div>

                <div class="mt-4">
                    <div class="left-small-title">语言种类：</div>
                    <div v-for="(item,index) in allLanguageList" :key="index" class="mt-1 copy-a" @click="selectBookLanguage(item.id)">
                        {{item.label}}
                    </div>
                </div>

            </div>
            <div class="df fdc ml-8">

                <div v-for="item in tableData" class="df mt-2">
                    <div >
                        <img style="width:90px" :src="'/book/getLocalSystemPic?filePath=' + item.picUrl"/>
                    </div>
                    <div class="ml-2 df fdc">
                        <div>
                            <span class="mr-4 copy-a" @click="jumptoBookDetail(item)">{{item.bookName}} </span>
                            <el-button size="mini" style="width:100px;" class="ml-4" @click="addBookCollection(item)" v-if="!item.isAddToCllection">添加到书单</el-button>
                        </div>
                        <div class="mb-1">
                            <span>著者:{{item.author}}</span>
                        </div>
                        <div class="mb-1">
                            <span>出版社:{{item.publish}}</span>
                            <span class="ml-4">出版日期:{{item.publishYear}}</span>
                        </div>
<!--                        <div class="mt-1 mb-1">-->
<!--                            <span>文献类型:</span>-->
<!--                        </div>-->
                        <el-popover
                                placement="top-start"
                                title="标题"
                                width="800"
                                trigger="hover">
                            <div class="df fdc" >
                                <div class="df">
                                    <span class="book-content-title">题名：</span>
                                    <span>Electricity and Magnetism   / [Book Author, Camille L. Wainwright, Ph.D.] ,</span>
                                </div>
                                <div class="df" v-if="item.isbn">
                                    <span class="book-content-title">ISBN：</span>
                                    <span>{{item.isbn}}</span>
                                </div>
                                <div class="df" v-if="item.price">
                                    <span class="book-content-title">价格：</span>
                                    <span>{{item.price}}</span>
                                </div>
                                <div class="df" v-if="item.language">
                                    <span class="book-content-title">语种：</span>
                                    <span>{{item.language}}</span>
                                </div>
                                <div class="df">
                                    <span class="book-content-title">出版发行：</span>
                                    <div>
                                        <span>出版地：</span>
                                        <span>{{item.publishPlace}}</span>
                                        <span class="book-content-title">出版社：</span>
                                        <span>{{item.publish}}</span>
                                        <span class="book-content-title">出版日期：</span>
                                        <span>{{item.publishYear}}</span>
                                    </div>
                                </div>
                                <div class="df" v-if="item.mainResponsibility">
                                    <span class="book-content-title">主要负责人：</span>
                                    <span>{{item.mainResponsibility}}</span>
                                </div>
                                <div class="df" v-if="item.secondResponsibility">
                                    <span class="book-content-title">次要负责人：</span>
                                    <span>{{item.secondResponsibility}}</span>
                                </div>
                                <div class="df" v-if="item.revision">
                                    <span class="book-content-title">版次：</span>
                                    <span>{{item.revision}}</span>
                                </div>
                            </div>
                            <el-button slot="reference" size="small" >图书信息概览</el-button>
                        </el-popover>
                    </div>
                </div>

                <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                               :page-sizes="[10, 20, 50]"
                               prev-text="上一页" next-text="下一页"
                               :page-size="tableDataPaging.pageSize"
                               :current-page="tableDataPaging.currentPage"
                               @current-change="tableDataPagingChange"
                               @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                               @size-change="tableDataPagingSizeChange"
                               style="float:right;margin-top: 40px;padding-bottom:50px;">
                </el-pagination>


            </div>

            <div>
              <span style="font-size:20px;font-weight: bold">图书推荐</span>
                <div v-for="item in recommendBooks" class="df mt-2">
                    <div >
                        <img style="width:90px" :src="'/book/getLocalSystemPic?filePath=' + item.picUrl"/>
                    </div>
                    <div class="ml-2 df fdc">
                        <span>{{item.bookName}} </span>
                        <div class="mb-1">
                            <span>著者:{{item.author}}</span>
                        </div>
                        <div class="mb-1">
                            <span>出版社:{{item.publish}}</span>
                            <span class="ml-4">出版日期:{{item.publishYear}}</span>
                        </div>
                        <!--                        <div class="mt-1 mb-1">-->
                        <!--                            <span>文献类型:</span>-->
                        <!--                        </div>-->
                        <el-popover
                                placement="top-start"
                                title="标题"
                                width="800"
                                trigger="hover">
                            <div class="df fdc" >
                                <div class="df">
                                    <span class="book-content-title">题名：</span>
                                    <span>Electricity and Magnetism   / [Book Author, Camille L. Wainwright, Ph.D.] ,</span>
                                </div>
                                <div class="df" v-if="item.isbn">
                                    <span class="book-content-title">ISBN：</span>
                                    <span>{{item.isbn}}</span>
                                </div>
                                <div class="df" v-if="item.price">
                                    <span class="book-content-title">价格：</span>
                                    <span>{{item.price}}</span>
                                </div>
                                <div class="df" v-if="item.language">
                                    <span class="book-content-title">语种：</span>
                                    <span>{{item.language}}</span>
                                </div>
                                <div class="df">
                                    <span class="book-content-title">出版发行：</span>
                                    <div>
                                        <span>出版地：</span>
                                        <span>{{item.publishPlace}}</span>
                                        <span class="book-content-title">出版社：</span>
                                        <span>{{item.publish}}</span>
                                        <span class="book-content-title">出版日期：</span>
                                        <span>{{item.publishYear}}</span>
                                    </div>
                                </div>
                                <div class="df" v-if="item.mainResponsibility">
                                    <span class="book-content-title">主要负责人：</span>
                                    <span>{{item.mainResponsibility}}</span>
                                </div>
                                <div class="df" v-if="item.secondResponsibility">
                                    <span class="book-content-title">次要负责人：</span>
                                    <span>{{item.secondResponsibility}}</span>
                                </div>
                                <div class="df" v-if="item.revision">
                                    <span class="book-content-title">版次：</span>
                                    <span>{{item.revision}}</span>
                                </div>
                            </div>
                            <el-button slot="reference" size="small" >图书信息概览</el-button>
                        </el-popover>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--赠书-->
    <div id="donation">
        <iframe src="../donation/donationListUser.html" frameborder="0" scrolling="no" hspace="0" width="100%" height="1000px;"></iframe>
    </div>

    <!--公告-->
    <div id="announcement">
        <iframe src="../notice/noticeListUser.html?type=1" frameborder="0" scrolling="no" hspace="0" width="100%" height="1000px;"></iframe>
    </div>

    <!--活动-->
    <div id="active">
        <iframe src="../activity/activeListUser.html" frameborder="0" scrolling="no" hspace="0" width="100%" height="1000px;"></iframe>
    </div>

    <!--问题与帮助-->
    <div id="question">
        <iframe src="../notice/noticeListUser.html?type=2" frameborder="0" scrolling="no" hspace="0" width="100%" height="1000px;"></iframe>
    </div>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                value:"",
                tableDataLoading:false,
                tableData:[],
                queryParam : {
                    bookName:"",
                    typeId:"",
                    isbn:"",
                    ticketNumber:"",
                    nameOrId:"",
                    nameAndId:"",
                },
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                nearTenYear:[],
                allLanguageList:[],
                recommendBooks:[],
                bookCollectionList:[],
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                //收藏
                that.getBookCollectionList();
                //获取表格的信息
                that.getTableDataMethod();

                that.setAllSelectOptions();

                //region 获取近10年
                let now = new Date();
                let currentYear = now.getFullYear();
                for(let i = 0 ; i < 10 ; i++){
                    that.nearTenYear.push(currentYear - i );
                }
                //endregion 获取近10年

                //region 获取图书推荐的列表
                that.getRecommendBooks();
                //endregion 获取图书推荐的列表
                that.showNav('index',0);
                //$($("#navWrap").children()[0]).addClass("active");

            });
        },
        methods: {
            setAllSelectOptions(){
                let that = this;
                getDicTSysdicMethodEL("book_language","allLanguageList",that);
            },

            selectPublishYear(publishYear){
                let that = this;
                that.getTableDataMethod("",publishYear);
            },
            selectBookLanguage(bookLanguage){
                let that = this;
                that.getTableDataMethod("","",bookLanguage);
            },

            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi,publishYear,bookLanguage){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {nameOrId,nameAndId} = this.queryParam
                let queryData = {
                    nameOrId: $.trim(nameOrId),
                    nameAndId: $.trim(nameAndId),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                    prevMaxId:null
                }

                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/book/getBookListUser', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            if(that.bookCollectionList){
                                for(let i = 0 ; i < that.tableData.length ;i++){
                                    for (let j = 0; j < that.bookCollectionList.length; j++) {
                                        if(that.tableData[i].id ==  that.bookCollectionList[j].bookId){
                                            that.tableData[i].isAddToCllection = true;
                                            break;
                                        }
                                    }
                                }
                            }
                            that.tableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },

            // 获取图书推荐的列表
            getRecommendBooks(){
                let that = this;
                requestApiTB("bookRecommend/getBookRecommendList",{},'post',function(res){
                    if (res.code === 0) {
                        that.recommendBooks = res.data;

                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //添加到书单
            addBookCollection(book){
                let that = this;
                if(!book.id){
                    return;
                }
                requestApiTB("book/collection/addBookCollection",{"bookId" : book.id},'post',function(res){
                    if (res.code === 0) {
                        that.$message.success("添加成功");
                        that.getBookCollectionList();
                        that.getTableDataMethod();
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //跳转到书籍详情
            jumptoBookDetail(book){
                let that = this;
                if(!book.id){
                    return;
                }
                window.open("../book/bookDetail.html?bookId=" + book.id);
            },

            //获取书单列表
            getBookCollectionList(){
                let that = this;
                requestApiTB("book/collection/getBookCollectionList",{pageNum:1,pageSize:10000},'post',function (res){
                    that.tableDataLoading = false;
                    if (res.code === 0) {
                        that.bookCollectionList = res.data.list;
                    }else{
                        that.$message.error("error");
                    }
                });
            },

            showNav(jqueryId,index){
                let that = this;
                $("#navWrap").children().removeClass("active");
                $("#index").css("display","none");
                $("#donation").css("display","none");
                $("#announcement").css("display","none");
                $("#active").css("display","none");
                $("#question").css("display","none");
                $("#" + jqueryId).css("display","block");
                $($("#navWrap").children()[index]).addClass("active");
            },





        }
    })
</script>
</html>